{% extends "learning/base.html" %}

{% block title %}个人资料 · 高中数学助手{% endblock %}

{% block content %}
<!-- Profile Header -->
<div style="max-width:900px;margin:0 auto 2rem;">
    <div class="card" style="background:linear-gradient(135deg,var(--primary-50),var(--surface-elevated));border:none;">
        <div style="display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;">
            <div style="width:80px;height:80px;border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--accent),var(--primary-500));display:grid;place-items:center;font-size:2.5rem;color:white;box-shadow:var(--shadow-lg);">
                👤
            </div>
            <div style="flex:1;">
                <h2 style="margin:0 0 0.5rem 0;">{{ request.user.get_full_name|default:request.user.username }}</h2>
                <div style="display:flex;gap:1rem;flex-wrap:wrap;align-items:center;">
                    <span class="pill">{{ role_display }}</span>
                    {% if assigned_teacher %}
                        <span style="color:var(--text-secondary);font-size:0.9375rem;">
                            指导老师：{{ assigned_teacher.get_full_name|default:assigned_teacher.username }}
                        </span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Edit Profile Form -->
<section class="card" style="max-width:900px;margin:0 auto 2rem;">
    <h3 style="margin:0 0 0.5rem 0;">✏️ 编辑个人资料</h3>
    <p style="margin:0 0 1.5rem 0;color:var(--text-secondary);">
        更新你的个人信息，保持与老师的沟通畅通
    </p>
    <form method="post" novalidate>
        {% csrf_token %}
        <input type="hidden" name="action" value="update_profile">
        <div style="display:grid;gap:1.25rem;">
            {% for field in form %}
                <div>
                    <label for="{{ field.id_for_label }}">
                        {{ field.label }}
                        {% if field.field.required %}
                            <span style="color:var(--danger);margin-left:0.25rem;">*</span>
                        {% endif %}
                    </label>
                    {{ field }}
                    {% if field.help_text %}
                        <small style="display:block;color:var(--text-secondary);margin-top:0.5rem;font-size:0.875rem;">
                            {{ field.help_text }}
                        </small>
                    {% endif %}
                    {% for error in field.errors %}
                        <small style="color:var(--danger);display:block;margin-top:0.5rem;font-size:0.875rem;">
                            {{ error }}
                        </small>
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
        <button class="button" type="submit" style="margin-top:1.5rem;">保存个人信息</button>
    </form>
</section>

<!-- Account Info -->
<section class="card" style="max-width:900px;margin:0 auto 2rem;">
    <h3 style="margin:0 0 1.5rem 0;">📊 账号信息</h3>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;">
        <div style="padding:1rem;background:var(--surface);border-radius:var(--radius-md);border:1px solid var(--border-subtle);">
            <div style="font-size:0.8125rem;color:var(--text-tertiary);margin-bottom:0.25rem;">用户名</div>
            <div style="font-weight:600;color:var(--text-primary);">{{ request.user.username }}</div>
        </div>
        <div style="padding:1rem;background:var(--surface);border-radius:var(--radius-md);border:1px solid var(--border-subtle);">
            <div style="font-size:0.8125rem;color:var(--text-tertiary);margin-bottom:0.25rem;">账号角色</div>
            <div style="font-weight:600;color:var(--text-primary);">{{ role_display }}</div>
        </div>
        <div style="padding:1rem;background:var(--surface);border-radius:var(--radius-md);border:1px solid var(--border-subtle);">
            <div style="font-size:0.8125rem;color:var(--text-tertiary);margin-bottom:0.25rem;">注册日期</div>
            <div style="font-weight:600;color:var(--text-primary);">{{ request.user.date_joined|date:"Y-m-d" }}</div>
        </div>
        <div style="padding:1rem;background:var(--surface);border-radius:var(--radius-md);border:1px solid var(--border-subtle);">
            <div style="font-size:0.8125rem;color:var(--text-tertiary);margin-bottom:0.25rem;">最近登录</div>
            <div style="font-weight:600;color:var(--text-primary);">
                {% if request.user.last_login %}
                    {{ request.user.last_login|date:"Y-m-d H:i" }}
                {% else %}
                    首次登录
                {% endif %}
            </div>
        </div>
    </div>
</section>


<!-- Announcements -->
<section class="card" style="max-width:900px;margin:0 auto 2rem;">
    <h3 style="margin:0 0 1.5rem 0;">📢 老师公告</h3>
    
    {% if announcements %}
        <div style="display:flex;flex-direction:column;gap:1rem;">
            {% for ann in announcements %}
            <div style="padding:1.25rem;background:var(--warning-light);border-radius:var(--radius-lg);border-left:4px solid var(--warning);">
                <div style="display:flex;align-items:start;justify-content:space-between;gap:1rem;margin-bottom:0.75rem;">
                    <h4 style="margin:0;color:var(--text-primary);font-size:1rem;">{{ ann.title }}</h4>
                    <span style="font-size:0.8125rem;color:var(--text-tertiary);white-space:nowrap;">
                        {{ ann.created_at|date:"m/d H:i" }}
                    </span>
                </div>
                <p style="margin:0;color:var(--text-secondary);line-height:1.6;">{{ ann.content }}</p>
            </div>
            {% endfor %}
        </div>
    {% else %}
        <div style="text-align:center;padding:3rem 1rem;color:var(--text-tertiary);">
            <div style="font-size:3rem;margin-bottom:0.5rem;">📭</div>
            <p style="margin:0;">暂无老师公告</p>
        </div>
    {% endif %}
</section>

<!-- Assignments -->
<section class="card" style="max-width:900px;margin:0 auto;">
    <h3 style="margin:0 0 1.5rem 0;">📝 作业列表</h3>
    
    {% if assignment_pairs %}
        <div style="display:flex;flex-direction:column;gap:1rem;">
            {% for assignment, submission in assignment_pairs %}
            <div style="padding:1.25rem;background:var(--success-light);border-radius:var(--radius-lg);border-left:4px solid var(--success);">
                <div style="display:flex;align-items:start;justify-content:space-between;gap:1rem;margin-bottom:0.75rem;">
                    <h4 style="margin:0;color:var(--text-primary);font-size:1rem;">{{ assignment.title }}</h4>
                    <div style="display:flex;gap:0.5rem;align-items:center;flex-shrink:0;">
                        {% if submission %}
                            <span class="pill" style="background:var(--success);color:white;font-size:0.75rem;">
                                已提交
                            </span>
                        {% else %}
                            <span class="pill" style="background:var(--danger);color:white;font-size:0.75rem;">
                                未提交
                            </span>
                        {% endif %}
                    </div>
                </div>
                <p style="margin:0 0 0.75rem 0;color:var(--text-secondary);line-height:1.6;white-space:pre-wrap;">{{ assignment.description }}</p>
                
                {% if submission and submission.content %}
                    <div style="padding:0.75rem;background:var(--surface);border-radius:var(--radius-md);margin-bottom:0.75rem;border:1px solid var(--border-subtle);">
                        <div style="font-size:0.8125rem;color:var(--text-tertiary);margin-bottom:0.5rem;">我的提交：</div>
                        <div style="color:var(--text-secondary);line-height:1.6;">{{ submission.content }}</div>
                    </div>
                {% endif %}
                
                <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;">
                    {% if assignment.due_date %}
                        <div style="font-size:0.8125rem;color:var(--text-tertiary);">
                            截止日期：{{ assignment.due_date|date:"Y-m-d" }}
                        </div>
                    {% else %}
                        <div></div>
                    {% endif %}
                    <a href="{% url 'accounts:assignment_submit' assignment.pk %}" 
                       class="btn-secondary"
                       style="padding:0.5rem 1rem;font-size:0.875rem;">
                        {{ submission|yesno:"修改提交,提交作业" }}
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
    {% else %}
        <div style="text-align:center;padding:3rem 1rem;color:var(--text-tertiary);">
            <div style="font-size:3rem;margin-bottom:0.5rem;">📚</div>
            <p style="margin:0;">暂无作业</p>
        </div>
    {% endif %}
</section>
{% endblock %}
